<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	*{
		padding:0;
		margin:0;
		user-select:none;
	}
	#list{
		width:1000px;
		margin:50px auto;
	}
	#list li{
		width:90%;
		height:50px;
		line-height:50px;
		border:1px solid #f1f1f1;
		padding:0 5%;
		list-style:none;
	}
	#list span{
		float:right;
		cursor:pointer;
	}
	#btn{
		width:120px;
		height:40px;
		text-align:center;
		line-height:40px;
		color:white;
		background:lightgreen;
		margin:15px auto;
		cursor:pointer;
	}
  </style>
 </head>
 <body>
	<div id="list">
		<div id="btn">添加项目</div>
		<ul id="item">
			<li><h1>这是我的第一个项目<span id="close">&times;</span></h1></li>
		</ul>
	</div>
	<script type="text/javascript">
		var oBtn = document.getElementById('btn');
		var oItem = document.getElementById('item');
		var oClose = document.getElementById('close');
		var index = 1;
		oBtn.addEventListener('click', function() {
			var oLi = document.createElement('li');
			oLi.innerHTML = `<h1>这是我的第${index}项目<span id="close">&times;</span><h1>`;
			oItem.appendChild(oLi);
			index++;
		});
		//通过上级监听
		oItem.addEventListener('click', function(e) {
			if(e.target.id === 'close'){
				oItem.removeChild(e.target.parentNode.parentNode);
			}
		});

	</script>
 </body>
</html>
